<template>
  <div>
    <div class="bg-yinying" v-if="chu" @click="yinying"></div>

    <!-- 选规格 -->
    <!-- <div class="bg-yinyingB" v-if="chuxian">
      <div class="chooseBox"></div>
    </div> -->
    <!-- 头部 -->
    <nav class="header" ref="nav">
      <div class="header-left">
        <span class="sp">商品</span>
      </div>
      <div class="header-right">
        <span class="pj">评价</span>
      </div>
    </nav>
    <!-- 主要内容 -->
    <main>
      <div class="main-left">
        <ul class="left-ul">
          <li
            v-for="(i, item) in arrList"
            :key="item"
            :class="{ blueBorder: item == atmitem }"
            @click="handoff(item)"
          >
            <span>{{ i.name }}</span>
          </li>
        </ul>
      </div>
      <ul class="right-ul" ref="mainright">
        <li v-for="(i, item) in arrList" :key="item">
          <div class="title">
            <div class="title-left">
              <b>{{ i.name }}</b>
              <span>{{ i.description }}</span>
            </div>
            <div class="title-right">
              <span @click="threeBlcakDisplay(i)">···</span>
              <div class="threeBlack" v-if="!i.is_selected">
                <span></span>
                {{ i.name }} {{ i.description }}
              </div>
            </div>
          </div>
          <div class="goods" v-for="(i, item) in arrAll" :key="item">
            <div class="goods-left">
              <img :src="src + i.image_path" alt="" />
            </div>
            <div class="goods-right">
              <p class="right-title">
                <span>{{ i.name }}</span>
                <span
                  class="zhaopai"
                  v-if="
                    !i.attributes[0] == ' ' && i.attributes[0].icon_name != '新'
                  "
                  :style="{
                    color: '#' + i.attributes[0].icon_color,
                    borderColor: '#' + i.attributes[0].icon_color,
                  }"
                  >{{ i.attributes[0].icon_name }}</span
                >
              </p>
              <p class="rubbish">{{ i.description }}</p>
              <p class="appraise">
                <span>月售{{ i.month_sales }}份</span>
                <span>好评率{{ i.satisfy_rate + "%" }}</span>
              </p>
              <p class="letter">
                <span
                  :style="{ color: '#' + i.activity.image_text_color }"
                  v-if="!i.activity == ' '"
                >
                  {{ i.activity.image_text }}
                </span>
              </p>
              <div class="price">
                <div class="prcie-left">
                  <b class="price-red">￥{{ i.specfoods[0].price }}</b
                  >起
                </div>
                <div class="price-right">
                  <span class="size" v-if="!i.specifications[0] == ' '">
                    <button @click="choose(item)">
                      选{{ i.specifications[0].name }}
                    </button>
                  </span>
                  <span class="compute" v-else>
                    <button
                      class="jian"
                      v-if="i.is_featured"
                      @click="splice(item)"
                    >
                      -
                    </button>
                    <span class="zhi" v-if="i.is_featured > 0">{{
                      i.is_featured
                    }}</span>
                    <button class="jia" @click="add(item)">+</button>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </main>
    <footer class="footerCar">
      <div class="carList" v-if="chu">
        <div class="carList-top">
          <span>购物车</span>
          <span @click="arrAllClear">
            <svg
              t="1631362350602"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="13839"
              width="200"
              height="200"
            >
              <path
                d="M737.76 1024H276.253c-63.628 0-115.42-51.645-115.42-115.156V302.763c0-15.925 12.937-28.853 28.837-28.853 15.924 0 28.873 12.928 28.873 28.853v606.081c0 31.682 25.886 57.45 57.71 57.45H737.76c31.865 0 57.741-25.768 57.741-57.45V302.763c0-15.925 12.938-28.853 28.858-28.853 15.9 0 28.848 12.928 28.848 28.853v606.081c0 63.506-51.809 115.156-115.447 115.156z m-86.507-173.106c-15.92 0-28.828-12.877-28.828-28.828V418.163c0-15.91 12.903-28.837 28.828-28.837 15.93 0 28.847 12.928 28.847 28.837v403.903c0.005 15.95-12.917 28.828-28.847 28.828z m-144.223 0c-15.93 0-28.838-12.877-28.838-28.828V418.163c0-15.91 12.907-28.837 28.838-28.837 15.899 0 28.832 12.928 28.832 28.837v403.903c0.005 15.95-12.928 28.828-28.832 28.828z m-144.249 0c-15.93 0-28.853-12.877-28.853-28.828V418.163c0-15.91 12.923-28.837 28.853-28.837 15.92 0 28.837 12.928 28.837 28.837v403.903c0 15.95-12.917 28.828-28.837 28.828z m620.25-605.832H31.018c-15.925 0-28.863-12.902-28.863-28.827 0-15.935 12.938-28.848 28.863-28.848H305.09v-57.562c0-47.785 38.926-86.691 86.773-86.691h230.311c47.887 0 86.768 38.9 86.768 86.69v57.563h274.083c15.894 0 28.848 12.913 28.848 28.848 0.005 15.925-12.948 28.827-28.843 28.827z m-620.25-57.675h288.477v-57.562c0-15.997-13.04-28.99-29.073-28.99H391.87c-16.038 0-29.088 12.993-29.088 28.99v57.562z m0 0"
                p-id="13840"
              ></path>
            </svg>
            清空
          </span>
        </div>
        <ul class="carList-ul">
          <li v-for="(i, item) in arrAll" :key="item" v-if="i.is_featured > 0">
            <div class="shop-left">
              <span class="shopName" @click="dianji(i, item)">{{
                i.name
              }}</span>
              <div class="shop-right">
                <span class="shop-price"> ￥{{ i.specfoods[0].price }} </span>
                <div class="shop-button">
                  <span @click="splice(item)">-</span>
                  <span>{{ i.is_featured }}</span>
                  <span @click="add(item)">+</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="car" @click="shopCar">
        <div class="blueBG" v-if="all > 0"></div>
        <div class="number" v-if="all > 0">{{ all }}</div>
        <img src="../../assets/wx_20210909203052.png" alt="" />
      </div>
      <div class="money" @click="shopCar">
        <span>￥{{ price }}</span>
        <span>配送费￥5</span>
      </div>
      <div class="car-right" :class="{ bgGreen: all > 0 }">
        <span v-if="all == 0">还差￥20起送</span>
        <span v-else>去结算</span>
      </div>
    </footer>
  </div>
</template>
<script>
import { shopCarList, money } from "../../API/index";
import jq from "jquery";
export default {
  data() {
    return {
      chuxian: true,
      arrList: [],
      atmitem: 0,
      arrMenu: [],
      src: "http://elm.cangdu.org/img/",
      price: 0,
      arrMoney: [],
      price: 0,
      bool: true,
      all: 0,
      arrAll: [],
      shopCarShow: false,
      chu: false,
      show: false,
    };
  },
  async mounted() {
    var res = await shopCarList(this.$route.query.id);
    this.arrList = res.data;
    var Rmb = await money();
    this.arrMoney = Rmb.data;
    for (var j = 0; j < this.arrList.length; j++) {
      this.arrAll.push(this.arrList[j].foods);
    }
    this.arrAll = this.arrAll.reduce(function (a, b) {
      return a.concat(b);
    });
    this.$refs.mainright.addEventListener("scroll", this.hua);
    if (localStorage.id == "") {
      localStorage.id = this.$route.query.id;
      localStorage.arrAll = this.arrAll;
      localStorage.all = "";
      localStorage.price = "";
    } else {
      if (localStorage.id == this.$route.query.id) {
        if (localStorage.arrAll) {
          this.arrAll = JSON.parse(localStorage.arrAll);
          this.all = localStorage.all;
          this.price = localStorage.price;
        } else {
          localStorage.arrAll = JSON.stringify(this.arrAll);
          localStorage.all = JSON.stringify(this.all);
          localStorage.price = JSON.stringify(this.price);
        }
      } else {
        localStorage.id = "";
      }
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    yinying() {
      this.chu = !this.chu;
    },
    hua() {
      var top = this.$refs.nav.offsetHeight;
      var scrollTop = this.$refs.mainright.scrollTop + Math.ceil(top) * 0.99;
      scrollTop = Math.ceil(scrollTop);
      var arr = this.$refs.mainright.children;
      for (var i = 0; i < arr.length - 1; i++) {
        if (arr[i + 1].offsetTop > scrollTop && scrollTop > arr[i].offsetTop) {
          this.atmitem = i;
        }
      }
    },
    choose(item) {
      console.log(item);
    },
    handoff(item) {
      this.$refs.mainright.removeEventListener("scroll", this.hua);
      this.atmitem = item;
      var height = this.$refs.nav.offsetHeight;
      height = Math.ceil(height);
      var h = this.$refs.mainright.children[item].offsetTop - height;
      console.log(h);
      jq(".right-ul").animate({ scrollTop: h }, 300);
      setTimeout(() => {
        this.$refs.mainright.addEventListener("scroll", this.hua);
      }, 310);
    },
    threeBlcakDisplay(i) {
      i.is_selected = !i.is_selected;
    },
    add(item) {
      this.arrAll[item].is_featured++;
      this.all = 0;
      this.price = 0;
      for (var i = 0; i < this.arrAll.length; i++) {
        this.all += this.arrAll[i].is_featured;
        this.price +=
          this.arrAll[i].is_featured * this.arrAll[i].specfoods[0].price;
      }
      localStorage.arrAll = JSON.stringify(this.arrAll);
      this.arrAll = JSON.parse(localStorage.arrAll);
      localStorage.all = this.all;
      localStorage.price = this.price;
    },
    splice(item) {
      this.arrAll[item].is_featured--;
      this.all = 0;
      this.price = 0;
      for (var i = 0; i < this.arrAll.length; i++) {
        this.all += this.arrAll[i].is_featured;
        this.price +=
          this.arrAll[i].is_featured * this.arrAll[i].specfoods[0].price;
      }
      if (this.all == 0) {
        this.chu = false;
      }
      localStorage.arrAll = JSON.stringify(this.arrAll);
      this.arrAll = JSON.parse(localStorage.arrAll);
      localStorage.all = this.all;
      localStorage.price = this.price;
    },
    shopCar() {
      if (this.all > 0) {
        this.chu = !this.chu;
      }
    },
    arrAllClear() {
      for (var i = 0; i < this.arrAll.length; i++) {
        this.arrAll[i].is_featured = 0;
      }
      this.all = 0;
      this.price = 0;
      localStorage.arrAll = JSON.stringify(this.arrAll);
      this.arrAll = JSON.parse(localStorage.arrAll);
      localStorage.all = this.all;
      localStorage.price = this.price;
      this.chu = false;
    },
  },
};
</script>
<style scoped>
/* .bg-yinyingB {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0,0,0,.5);
}
.chooseBox {
  position: absolute;
  background: blue;
  width: 16rem;
  height: 10rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
} */
.shop-button {
  width: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shop-button span:nth-of-type(1) {
  border: 1px solid #3190e8;

  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  color: #3190e8;
  align-items: center;
  font-size: 0.5rem;
}
.shop-button span:nth-of-type(3) {
  background: #3190e8;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  color: #fff;
  align-items: center;
  font-size: 0.5rem;
}
.shop-price {
  font-size: 0.6rem;
  color: #f60;
}
.shop-right {
  margin-right: 1rem;

  width: 8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bg-yinying {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.carList-ul {
  width: 100%;
  max-height: 26rem;
  background: blue;
  overflow: auto;
}
.carList-ul li {
  height: 4rem;
  background: #fff;
}
.carList-ul li .shop-left {
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shopName {
  font-size: 1rem;
  color: #666;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carList-top {
  width: 100%;
  height: 2rem;
  background-color: #eceff1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}
.carList svg {
  width: 0.5rem;
  height: 0.5rem;
}
.carList-top span {
  font-size: 0.5rem;
  color: #666;
  display: flex;
  justify-content: space-between;
  width: 2.5rem;
  align-items: center;
  height: 100%;
}
.carList-top span:nth-of-type(1) {
  font-size: 1rem;
  width: 3rem;
}
.carList {
  width: 100%;
  position: fixed;
  bottom: 2rem;
  left: 0;
  padding-bottom: 1rem;
}
.number {
  position: absolute;
  border-radius: 50%;
  right: -0.5rem;
  top: -0.5rem;
  background-color: #ff461d;
  color: #fff;
  font-size: 0.5rem;
  display: flex;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
}
.blueBG {
  background-color: #3190e8;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
}
.car img {
  position: absolute;
  z-index: 2;
}
.bgGreen {
  background-color: #4cd964 !important;
}
.car-right {
  background-color: #535356;
  width: 7rem;
  float: right;
  height: 100%;
}
.car-right span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  font-weight: 700;
}
.money {
  left: 20%;
  text-align: left;
  bottom: 0;
  color: #fff;
  font-weight: 700;
  position: absolute;
  width: 11.5rem;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.money span {
  width: 100%;
  display: inline-block;
}
.zhi {
  margin-left: 1rem;
}
.car {
  position: absolute;
  border: 0.18rem solid #444;
  background-color: #3d3d3f;
  border-radius: 50%;
  bottom: 0.5rem;
  left: 1rem;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
}
.car img {
  width: 2 rem;
  height: 2rem;
}

.right-ul {
  height: 42rem;
  overflow-y: scroll;
  width: 75%;
}
.footerCar {
  width: 100%;
  height: 3rem;
  background: #3d3d3f;
  position: fixed;
  bottom: 0;
  left: 0;
}
.size {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}
.size button {
  width: 3rem;
  height: 1.5rem;
  outline: none;
  border: none;
  color: #fff;
  background: #3190e8;
  font-size: 0.5rem;
  border-radius: 20%;
}
.compute button {
  outline: none;
  border: none;
  background: #3190e8;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.compute .jia {
  float: right;
}
.compute .jian {
  position: absolute;
  bottom: 0rem;
}
.compute {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 4rem;
  text-align: center;
  line-height: 1rem;
}
.zhaopai {
  position: absolute;
  right: 1rem;
  top: 0;
  border: 1px solid #000;
  font-size: 0.4rem;
  border-radius: 50%;
}
.price-right {
  position: relative;
}
.price .prcie-left {
  font-size: 0.5rem;
  color: #666;
}
.price b {
  font-size: 0.9rem;
}
.letter {
  font-size: 0.3rem;
}
.letter span {
  border: 1px solid rgb(241, 136, 79);
  border-radius: 50%;
}
.price-red {
  color: #f60;
}
.appraise {
  font-size: 0.5rem;
  color: #333;
}
.rubbish {
  font-size: 0.5rem;
  color: #999;
  line-height: 0.6rem;
}
.right-title {
  font-size: 1rem;
  color: #333;
  position: relative;
}
.right-title b {
  position: absolute;
}
.main-left {
  overflow-y: scroll;
  height: 42rem;
}
.main-right {
  overflow-y: scroll;
  height: 42rem;
}
.threeBlack span {
  display: block;
  position: absolute;
  border-width: 0.5rem;
  right: 0.5rem;
  top: -0.99rem;
  border-color: transparent transparent #39373a transparent;
  border-style: solid;
}
.threeBlack {
  background-color: #39373a;
  color: #fff;
  padding-left: 0.5rem;
  box-sizing: border-box;
  font-size: 0.55rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 10rem;
  border-radius: 7%;
  display: flex;
  align-items: center;
  height: 2rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-left {
  width: 50%;
  line-height: 3rem;
  height: 100%;
}
.title-left b {
  font-size: 0.7rem;
  color: #666;
}
.title-right {
  position: relative;
}
.title-left span {
  font-size: 0.5rem;
  color: #999;
  width: 30%;
  overflow: hidden;
}
.goods-left {
  width: 25%;
  height: 100%;
}
.goods-right {
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.3rem 0;
}
.goods-left img {
  width: 4rem;
  height: 4rem;
}
.right-ul li .goods {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  height: 7rem;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
  align-items: center;
  width: 100%;
  height: 3rem;
  background: #f3f3f3;
}
.main-left {
  width: 25%;
  background: #f3f3f3;
}
.main-right {
  width: 75%;
}
.left-ul {
  background: #f3f3f3;
}
.left-ul li {
  border-left: 4px solid transparent;
  border-bottom: 0.025rem solid #ededed !important;
  height: 4rem;
  display: flex;
  text-align: left;
  font-size: 0.6rem;
  color: #666;
  line-height: 4rem;
  padding-left: 0.3rem;
  box-sizing: border-box;
}
.blueBorder {
  border-color: #3190e8 !important;
  background: #fff;
}
main {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex: 1;
  border-top: 1px solid #ccc;
  margin-top: 3rem;
}
</style>
<style scoped>
.header {
  background: #fff;
  z-index: 10000;
  padding: 0 2rem;
  width: 100%;
  height: 3rem;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.header span {
  font-size: 0.8rem;
  color: #666;
  padding: 0.2rem 0.1rem;
  border-bottom: 0.12rem solid #fff;
}
.header .sp {
  width: 2rem;
  height: 1.5rem;
  border-bottom: 2px solid #3190e8;
  color: #3190e8;
  justify-content: center;
  align-items: center;
  display: flex;
}
.pj {
  color: #666;
}
.header div {
  width: 50%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>